<template>
  <div id="tmpl">
      <!-- 评论组件 -->
      <!-- 提交评论数据的静态结构 -->
      <div id="postcomment">
        <h3>提交评论</h3>
        <p class="p"></p>
        <textarea placeholder="请输入您要评价的内容..." v-model="postcontent"></textarea>
        <mt-button type="primary" size='large' @click="postcomment" >发表</mt-button>
      </div>
      <!-- 评论数据列表 -->
      <div id="list">
        <h3>评论列表</h3>
        <p class="p"></p>
            <div v-for="(item,index) in list" :key="index">
                <div class="title">
                    <span>{{index+1}}楼</span>
                    <span>用户:{{item.uesr_name}}</span>
                    <span>发表时间:{{item.add_time|datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
      </div>
      <!-- 获取更多 -->
      <mt-button type='danger' size='large' plain @click='getmore'>加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import common from "../../kits/common.js";
export default {
  data() {
    return {
      pageindex: 1, //获取api中的评论数据第几页
      postcontent: "",
      list: [] //评论数据数组
    };
  },
  props: ["id"],
  created() {
    /* 获取当前质询数据的评论信息列表 */
    this.getcommentlist(this.pageindex);
  },
  methods: {
    /* 更多 getmore */
    getmore() {
        /* 实现this.pageindex值加一 */
        this.pageindex++;
        /* 获取当前this.pageindex值对应的分页数据 */
        this.getcommentlist(this.pageindex);
    },

    /* 实现获取当前数据的评论数据 pageindex代表的是当前获取的是哪一页数据 */
    getcommentlist(pageindex) {
      pageindex = pageindex || 1;
      /* 确定评论数据的url */

      var url =
        common.apidomain +
        "/api/getcomments/" +
        this.id +
        "?pageindex=" +
        pageindex;
      /* 发出ajax请求获取数据 */
      this.$http.get(url).then(function(res) {
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        /* 实现message中的数据赋值给this.list */
        this.list =this.list.concat(res.body.message);
      });
    },
    postcomment() {
      if (this.postcontent.trim().length <= 0) {
        Toast("评论内容不能为空");
        return;
      }
      var url = common.apidomain + "/api/postcomment/" + this.id;
      this.$http
        .post(url, { content: this.postcontent }, { emulateJSON: true })
        .then(function(res) {
          Toast(res.body.message);
          this.list=[
              {
                  'user_name':'匿名用户',
                  'add_time':new Date(),
                  'content':this.postcontent
              }
          ].concat(this.list);
          this.postcontent = "";
          
        });
    }
  }
};
</script>

<style scoped>
#postcomment {
  padding: 5px;
}
.p {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
#list {
  padding: 5px;
}
.title {
  color: #6d6d72;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px;
}
</style>

